<template>
  <div class="goods-list">
    <van-nav-bar
      v-if="!isWxapp"
      left-arrow
      fixed
      placeholder
      :border="false"
      title="购物"
      @click-left="back"
    >
      <template #title>
        <div class="nav-bar-title">
          <span> 购物车 </span>
        </div>
      </template>
    </van-nav-bar>
    <form action="/" class="form-wrap">
      <van-search
        v-model="shopname"
        class="search-field"
        shape="round"
        placeholder="名称"
        @search="handleSearch"
      />
      <van-field
        class="status-field"
        readonly
        clickable
        name="picker"
        :value="pickvalue"
        placeholder="请选择等级"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
    </form>
    <div class="gl-list">
      <div class="gl-item">
        <div class="btn-wrap">
          <span class="gl-add-icon"><van-icon name="plus" /></span>
          <span class="gl-add-text" @click="clickAdd">添加购物</span>
        </div>
      </div>
      <div v-for="(row, indx) in lists" :key="indx" class="gl-item" @click="clickEdit(row)">
        <div class="gl-i-firstrow">
          <span>{{ getDay(row.createtime) }}</span>
          <span class="gl-firstrow-status">{{ maps[row.status] }}</span>
        </div>
        <div class="gl-i-secrow">
          <span>{{ row.shopname }}</span>
          <span>{{ getDay(row.time) }}</span>
        </div>
        <div v-if="row.mark" class="gl-i-thrrow">{{ row.mark }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import { navTo, addUniSdk, getWxUrlParams } from '@/utils';

const statusTxts = {
  1: '马上',
  2: '次要',
  3: '未来',
};

export default {
  name: 'My',
  layout: 'barHeight',
  data() {
    return {
      isWxapp: this.$route.query.fromkey === 'wxapp',
      lists: [],
      maps: statusTxts,
      reverseMaps: Object.entries(statusTxts).reduce((acc, item) => {
        acc[item[1]] = item[0];
        return acc;
      }, {}),
      pickvalue: '',
      showPicker: false,
      columns: ['全部', ...Object.values(statusTxts)],
      shopname: '', // 搜索框绑定值
    };
  },
  head: {
    title: '购物',
  },
  mounted() {
    this.getdata();
    addUniSdk();
  },

  methods: {
    getDay(val) {
      return dayjs(val).format('YYYY年MM月DD日');
    },
    onConfirm(value) {
      this.pickvalue = value;
      this.showPicker = false;
      this.getdata();
    },
    async getdata(value) {
      const res = await this.$http.post('/api/shop/list', {
        pageNo: 1,
        pageSize: 200,
        status: this.reverseMaps[this.pickvalue],
        shopname: this.shopname,
      });
      this.lists = (res && res.data) || [];
    },
    back() {},
    goEdit(path) {
      if (this.isWxapp) {
        let url = `https://www.xnbz.site${path}`;
        const urlParamsStr = getWxUrlParams();
        url = `${url}?${urlParamsStr}`;
        window.wx.miniProgram.navigateTo({
          url: `/pages/web/web?loadUrl=${encodeURIComponent(url)}`,
        });
      } else {
        navTo(path);
      }
    },
    clickAdd() {
      this.goEdit('/klm/shop/add');
    },
    clickEdit(row) {
      this.goEdit(`/klm/shop/add?shopname=${row.shopname}`);
    },
    handleSearch() {
      this.getdata();
    },
    handleNavTabChange(tabName) {
      this.tab = tabName;
    },
  },
};
</script>

<style lang="less" scoped>
.goods-list {
  .form-wrap {
    display: flex;
    .search-field {
      flex: 1;
    }
    .status-field {
      width: 135px;
    }
  }
  .gl-list {
    padding: 0 12px 12px 12px;
  }
  .btn-wrap {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .gl-item {
    box-shadow: 0 0 27px -14px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    margin-top: 14px;
    padding: 0 12px;
  }
  .gl-add-text {
    line-height: 17px;
    font-size: 14px;
    color: #538fff;
  }
  .gl-add-icon {
    .van-icon-plus {
      &::before {
        color: #538fff;
        font-weight: 800;
        margin-right: 2px;
      }
    }
  }
  .gl-i-firstrow {
    line-height: 17px;
    font-size: 12px;
    font-family: 'PingFang SC';
    color: #999;
    display: flex;
    justify-content: space-between;
    height: 40px;
    align-items: center;

    border-bottom: 1px dashed #d8d8d8;
  }
  .gl-firstrow-status {
    color: #538fff;
  }
  .gl-i-secrow {
    color: black;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
  }
  .gl-i-thrrow {
    padding-bottom: 12px;
  }
  .gl-i-secrow {
    color: black;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    padding: 12px 0;
  }
}
</style>
